<template>
  <div class="i-table-no-border">
    <div>
      <table-btns
        :tableTopOperateData="listData.tableTopOperate"
        :tableTopBatchOperate="listData.tableTopBatchOperate"
        :selectedData="selectedData"
        :requestApi="listData.requestApi"
        :basePath="basePath"
        @exportData="exportData"
        @actionsChange="getData"
      >
      </table-btns>
    </div>
    <!-- 表格内容 start  -->
    <Table
      ref="table"
      :columns="columns"
      :data="tableDataList"
      :loading="loading"
      class="ivu-mt"
      stripe
      @on-filter-change="handleFilterChange"
      @on-select="handleSelect"
      @on-select-cancel="handleSelectCancel"
      @on-select-all="handleSelectAll"
      @on-select-all-cancel="handleSelectAllCancel"
    >
      <template slot-scope="{ row, index }" slot="canAttribute">
        <Select
          v-model="row.canAttribute"
          style="width: 100px"
          @on-change="isChange(row, index)"
          transfer
        >
          <Option
            v-for="item in canAttribute"
            :value="item.value"
            :key="item.value"
            >{{ item.label }}</Option
          >
        </Select>
      </template>

      <template slot-scope="{ row, index }" slot="type">
        <Select
          v-model="row.type"
          style="width: 100px"
          transfer
          disabled
          v-if="row.canAttribute === '1'"
        >
          <Option
            v-for="item in typeList"
            :value="item.value"
            :key="item.value"
            >{{ item.label }}</Option
          >
        </Select>
        <Select
          @on-change="typeChange(row, index)"
          v-model="row.type"
          style="width: 100px"
          transfer
          v-if="row.canAttribute === '2'"
        >
          <Option
            v-for="item in typeList"
            :value="item.value"
            :key="item.value"
            >{{ item.label }}</Option
          >
        </Select>
      </template>
      <template slot-scope="{ row, index }" slot="attributeMustHave">
        <Select
          v-model="row.attributeMustHave"
          style="width: 100px"
          v-if="row.canAttribute === '2'"
          @on-change="mustChange(row, index)"
          transfer
        >
          <Option
            v-for="item in attributeMustHave"
            :value="item.value"
            :key="item.value"
            >{{ item.label }}</Option
          >
        </Select>
      </template>
      <template slot-scope="{ row, index }" slot="potentialAttributeMustHave">
        <Select
          v-model="row.potentialAttributeMustHave"
          style="width: 100px"
          @on-change="mustChange(row, index)"
          transfer
        >
          <Option
            v-for="item in attributeMustHave"
            :value="item.value"
            :key="item.value"
            >{{ item.label }}</Option
          >
        </Select>
      </template>
      <template slot-scope="{ row, index }" slot="position">
        <Input
          v-model="row.position"
          @on-change="positionChange(row, index)"
          placeholder="Enter something..."
          style="width: 160px"
        />
      </template>
      <template slot-scope="{ row, index }" slot="action">
        <table-actions
          :requestApi="listData.requestApi"
          :basePath="basePath"
          :rowData="row"
          :indexData="index"
          @actionsChange="getData"
        ></table-actions>
      </template>
    </Table>
    <!-- 表格内容 end  -->
    <!-- 分页 start  -->
    <div class="ivu-mt ivu-text-center">
      <Page
        :total="totalNum"
        transfer
        show-total
        show-sizer
        :current.sync="nowPage"
        @on-change="getData"
        @on-page-size-change="handleChangePage"
      />
    </div>
    <!-- 分页 end  -->
  </div>
</template>
<script>
import { mapState, mapMutations } from 'vuex';
import util from '@/libs/util';
import { ApiRequest } from '@api/basePage';
import tables from '@/mixins/dynamictable'; // 混入通用代码

import qwInput from '@/components/common/formItem/qwInput'; // 表单input组件
import qwSelect from '@/components/common/formItem/qwSelect'; // 表单select组件
import qwDatePicker from '@/components/common/formItem/qwDatePicker'; // 表单日期组件
import qwSelectTree from '@/components/common/formItem/qwSelectTree'; // 表单下拉树组件
import tableActions from './tableActions'; // 表格操作项
import tableBtns from './tableBtns'; // 表格内部操作按钮

export default {
  mixins: [tables],
  props: {
    dynamicData: {
      type: Object
    },
    pagePath: {
      type: String
    }
  },
  computed: {
    ...mapState('admin/baseList', [
      'listData',
      'searchFormData',
      'searchFormDataQ'
    ])
  },
  components: {
    qwInput,
    qwSelect,
    qwDatePicker,
    qwSelectTree,
    tableActions,
    tableBtns
  },
  data () {
    return {
      util: util,
      basePath: this.dynamicData.basePath, // 拼接基础路径
      canAttribute: [
        {
          value: '1',
          label: '是'
        },
        {
          value: '2',
          label: '否'
        }
      ],
      attributeMustHave: [
        {
          value: '1',
          label: '是'
        },
        {
          value: '2',
          label: '否'
        }
      ],
      typeList: [
        {
          value: '01',
          label: '文本框'
        },
        // {
        //   value: '02',
        //   label: '下拉单选框'
        // },
        /* {
                        value: '03',
                        label: '单选框'
                    }, */
        {
          value: '03',
          label: '下拉单选框'
        },
        {
          value: '04',
          label: '下拉多选框'
        },
        {
          value: '05',
          label: '下拉单选框/文本框'
        }
      ]
    };
  },
  created () {},
  methods: {
    typeChange (row, index) {
      // canAttributeList
      this.tableDataList[index] = row;
    },
    isChange (row, index) {
      if (row.canAttribute === '1') {
        row.type = '04';
        row.attributeMustHave = '1';
      } else {
        row.attributeMustHave = '2';
      }
      this.tableDataList[index] = row;
    },
    mustChange (row, index) {
      this.tableDataList[index] = row;
    },
    positionChange (row, index) {
      this.tableDataList[index] = row;
    },
    ...mapMutations('admin/baseList', ['setTableRowData']),
    // 获取表格的数据
    getData () {
      let uuid = this.$route.query.uuid;
      let searchParam = [];
      Object.keys(this.searchFormData).forEach((key) => {
        if (key === 'attributeName') {
          searchParam.push({
            name: 'attributeName_s',
            value: this.searchFormData[key]
          });
        } else searchParam.push({ name: key, value: this.searchFormData[key] });
      });
      searchParam.push({ name: 'templateUuid', value: uuid });
      searchParam.push({ name: 'templateUuid_q', value: 'EQ' });
      let data = {
        nowPage: this.nowPage,
        pageShow: this.pageShow,
        searchParam: JSON.stringify(searchParam),
        sortName: '',
        sortType: ''
      };

      this.loading = true;
      // 开始请求列表
      ApiRequest(
        this.listData.requestApi.getTableList.url,
        this.listData.requestApi.getTableList.type,
        data
      ).then((res) => {
        let rData = res;
        if (rData.retData !== '') {
          rData.retData = rData.retData;
        }
        let tableDataList = rData.retData.results;
        tableDataList.forEach((item) => {
          let actions = [];
          actions.push(
            {
              name: 'renew',
              label: '更新',
              handleType: 'alert'
            },
            {
              name: 'disassociation',
              label: '取消关联',
              handleType: 'alert'
            }
          );

          item.actions = actions;
        });
        // 增加表格操作项
        this.tableDataList = rData.retData.results;
        this.totalNum = rData.retData.totalNum;
        this.loading = false;
      });
    }
  }
};
</script>
<style lang="less" scoped>
.i-table-no-border .ivu-table-header th {
  background: #f8f8f8;
}
</style>
